<template>
  <div>
    <template v-if="row.Mode !== 5 && row.col && row.col.FuncType != 0 && row.col.FuncType != 2">
      <deptSelect
        v-if="row.col.FuncType == 5"
        v-model="val.Val"
        :is-multiple="row.Mode == 9 || row.Mode == 10"
        @change="change"
      />
      <empInput
        v-else-if="row.col.FuncType == 4"
        v-model="val.Val"
        :is-multiple="row.Mode == 9 || row.Mode == 10"
        placeholder="选择人员"
        @change="change"
      />
      <companySelect
        v-else-if="row.col.FuncType == 6"
        v-model="val.Val"
        :is-multiple="row.Mode == 9 || row.Mode == 10"
        @change="change"
      />
      <treeDicItem
        v-else-if="row.col.FuncType == 7"
        v-model="val.Val"
        :dic-id="row.col.DicId"
        :is-multiple="row.Mode == 9 || row.Mode == 10"
        placeholder="选择字典项"
        @change="change"
      />
      <dictItem
        v-else-if="row.col.FuncType == 3"
        v-model="val.Val"
        :multiple="row.Mode == 9 || row.Mode == 10"
        :dic-id="row.col.DicId"
        placeholder="选择字典项"
        @change="change"
      />
      <el-select
        v-else-if="row.col.FuncType == 1"
        v-model="val.Val"
        placeholder="选择字典项"
        :multiple="row.Mode == 9 || row.Mode == 10"
        @change="change"
      >
        <el-option v-for="item in row.col.Items" :key="item.Key" :label="item.Value" :value="item.Key" />
      </el-select>
    </template>
    <div v-else-if="row.Mode == 5">
      <el-row :gutter="24" style="line-height: 50px;">
        <el-col :span="4" style="text-align: right;">起始</el-col>
        <el-col :span="20">
          <filterValue v-model="begin" @change="change" />
        </el-col>
      </el-row>
      <el-row :gutter="24" style="line-height: 50px;">
        <el-col :span="4" style="text-align: right;">截止</el-col>
        <el-col :span="20">
          <filterValue v-model="end" @change="change" />
        </el-col>
      </el-row>
    </div>
    <div v-else-if="row.col && (row.Mode == 9 || row.Mode == 10)">
      <el-row v-for="(k, index) in items" :key="index">
        <el-col :span="20">
          <filterValue v-model="items[index]" @change="change" />
        </el-col>
        <el-col :span="4">
          <el-button type="danger" size="mini" icon="el-icon-delete" circle @click="dropItem(index)" />
        </el-col>
      </el-row>
      <el-button icon="el-icon-plus" @click="addItem" />
    </div>
    <div v-else-if="row.col && row.col.DataType === 4">
      <el-switch
        v-model="val.Val"
        :active-value="'true'"
        :inactive-value="'false'"
        active-text="是"
        inactive-text="否"
        @change="change"
      />
    </div>
    <div v-else-if="row.col">
      <filterValue v-model="val" @change="change" />
    </div>
  </div>
</template>

<script>
import empInput from '@/components/emp/empInput.vue'
import deptSelect from '@/components/unit/deptSelect.vue'
import companySelect from '@/components/company/companySelect.vue'
import filterValue from './filterValue.vue'
export default {
  components: {
    empInput,
    deptSelect,
    companySelect,
    filterValue
  },
  props: {
    row: {
      type: Object,
      default: null
    },
    value: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      begin: null,
      end: null,
      items: [],
      val: {
        Val: null,
        ValueType: 0
      }
    }
  },
  watch: {
    row: {
      handler(val) {
        this.reset()
      },
      immediate: true
    },
    'row.col': {
      handler(val) {
        this.reset()
      },
      immediate: false
    }
  },
  mounted() { },
  methods: {
    change() {
      let res = null
      if (this.row.col) {
        if (this.row.Mode === 5 && this.begin.Val && this.end.Val) {
          res = [this.begin, this.end]
        } else if (this.row.Mode === 9 || this.row.Mode === 10) {
          res = this.items
        } else if (this.val && this.val.Val) {
          const t = {
            ValueType: this.val.ValueType === 1 ? 1 : Array.isArray(this.val.Val) ? 3 : 0
          }
          if (t.ValueType === 3) {
            t.Vals = this.val.Val
          } else {
            t.Val = this.val.Val
          }
          res = [t]
        } else {
          res = []
        }
        this.$emit('input', res)
        this.$emit('change', res)
      }
    },
    dropItem(index) {
      this.items.splice(index, 1)
      this.change()
    },
    addItem() {
      this.items.push({
        ValueType: 0,
        Val: null
      })
    },
    reset() {
      if (this.value != null && this.value.length > 0 && this.row.col != null) {
        const items = this.value
        if (this.row.Mode === 5) {
          if (items.length === 2) {
            this.begin = items[0]
            this.end = items[1]
          } else {
            this.begin = null
            this.end = null
          }
          this.items = []
          this.val.ValueType = 0
          this.val.Val = null
        } else if (this.row.Mode === 9 || this.row.Mode === 10) {
          this.items = items
          this.val.ValueType = 0
          this.val.Val = null
        } else if (items.length === 1) {
          this.items = []
          const item = items[0]
          this.val.ValueType = item.ValueType
          this.val.Val = item.ValueType === 3 ? item.Vals : item.Val
        } else {
          this.items = []
          this.val.ValueType = 0
          this.val.Val = null
        }
      } else {
        this.items = []
        this.val.ValueType = 0
        this.val.Val = null
      }
    }
  }
}
</script>
<style scoped></style>
